<template>
  <div class="admin-user-page">
    <!-- 搜索卡片 -->
    <div class="search-card">
      <a-form
        layout="inline"
        :model="formSerchParams"
        @submit="doSerach"
        class="search-form"
      >
        <a-form-item field="userName" label="用户名" class="form-item">
          <a-input
            allow-clear
            v-model="formSerchParams.userName"
            placeholder="请输入用户名"
            class="search-input"
          />
        </a-form-item>

        <a-form-item field="userProfile" label="用户简介" class="form-item">
          <a-input
            allow-clear
            v-model="formSerchParams.userProfile"
            placeholder="请输入简介"
            class="search-input"
          />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" class="search-btn">
            <template #icon>
              <icon-search />
            </template>
            搜索
          </a-button>
        </a-form-item>
      </a-form>
    </div>

    <!-- 数据表格 -->
    <div class="table-card">
      <a-table
        :columns="columns"
        :data="dataList"
        :pagination="pagination"
        :row-class="setRowClass"
        @page-change="onPageChange"
        row-key="id"
      >
        <!-- 用户头像 -->
        <template #userAvatar="{ record }">
          <a-avatar :size="40" shape="square">
            <img :src="record.userAvatar" alt="用户头像" />
          </a-avatar>
        </template>

        <!-- 用户角色 -->
        <template #userRole="{ record }">
          <a-tag color="arcoblue" size="small">
            {{ record.userRole === "admin" ? "管理员" : "普通用户" }}
          </a-tag>
        </template>

        <!-- 时间格式化 -->
        <template #createTime="{ record }">
          {{ dayjs(record.createTime).format("YYYY-MM-DD") }}
        </template>
        <template #updateTime="{ record }">
          {{ dayjs(record.updateTime).format("YYYY-MM-DD") }}
        </template>

        <!-- 操作列 -->
        <template #optional="{ record }">
          <a-popconfirm
            content="确认要删除该用户吗？"
            type="error"
            @ok="doDelete(record)"
          >
            <a-button status="danger">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from "vue";
import { API } from "@/api/typings";
import message from "@arco-design/web-vue/es/message";
import { dayjs } from "@arco-design/web-vue/es/_utils/date";
import {
  deleteUserUsingPost,
  listUserByPageUsingPost,
} from "@/api/userController";

// 初始化搜索条件
const initSearchParams = {
  current: 1,
  pageSize: 10,
};

// 分页配置
const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 10,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
  pageSizeOptions: [10, 20, 50],
});

const formSerchParams = ref<API.UserQueryRequest>({});
const serachParame = ref<API.UserQueryRequest>({ ...initSearchParams });
const dataList = ref<API.User[]>([]);
const total = ref<number>(0);

// 执行搜索
const doSerach = () => {
  serachParame.value = {
    ...initSearchParams,
    ...formSerchParams.value,
  };
};

// 加载数据
const loadData = async () => {
  const res = await listUserByPageUsingPost(serachParame.value);
  if (res.data.code === 0) {
    dataList.value = res.data.data?.records || [];
    total.value = res.data.data?.total || 0;
    pagination.total = total.value;
  } else {
    message.error("获取数据失败", res.data.message);
  }
};

// 分页变化处理
const onPageChange = (page: number) => {
  serachParame.value = {
    ...serachParame.value,
    current: page,
  };
};

// 删除用户
const doDelete = async (record: API.User) => {
  if (!record.id) return;
  const res = await deleteUserUsingPost({ id: record.id });
  if (res.data.code === 0) {
    message.success("删除成功");
    loadData();
  } else {
    message.error("删除失败", res.data.message);
  }
};

// 设置斑马纹
const setRowClass = (record: API.User, index: number) => {
  return index % 2 === 1 ? "stripe-row" : "";
};

watchEffect(() => {
  loadData();
});

// 表格列配置（已移除id列）
const columns = [
  {
    title: "用户名",
    dataIndex: "userName",
    width: 120,
    ellipsis: true,
  },
  {
    title: "账号",
    dataIndex: "userAccount",
    width: 120,
  },
  {
    title: "头像",
    dataIndex: "userAvatar",
    slotName: "userAvatar",
    width: 80,
    align: "center",
  },
  {
    title: "角色",
    dataIndex: "userRole",
    slotName: "userRole",
    width: 100,
    align: "center",
  },
  {
    title: "简介",
    dataIndex: "userProfile",
    width: 200,
    ellipsis: true,
  },
  {
    title: "创建时间",
    slotName: "createTime",
    width: 140,
  },
  {
    title: "更新时间",
    slotName: "updateTime",
    width: 140,
  },
  {
    title: "操作",
    slotName: "optional",
    width: 100,
    align: "center",
  },
];
</script>

<style scoped>
.admin-user-page {
  padding: 16px;
  height: 100%;
  box-sizing: border-box;
}

.search-card {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 4px;
}

.search-form {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.form-item {
  margin-right: 0;
  margin-bottom: 0;
}

.search-input {
  width: 200px;
}

.search-btn {
  border-radius: 4px;
}

.table-card {
  background-color: var(--color-bg-2);
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.table-card .arco-table-tr {
  transition: background-color 0.2s;
}

.table-card .arco-table-tr:hover {
  background-color: var(--color-fill-1) !important;
}

.stripe-row {
  background-color: var(--color-fill-1);
}

@media (max-width: 768px) {
  .search-input {
    width: 160px;
  }

  .table-card {
    overflow-x: auto;
  }
}
</style>
